<template>
	<div class="home_main">
		<!--Recommend></Recommend-->
		<div class="home_map">
			<div id="allmap" class="home_map_main"></div>
		</div>
		<article class="home_main_item">
			<header>
				<h1><i>定位：</i><a href="javascript:;" @click="citySearchNewsHandle">{{cityName}}</a><i>({{cityPoint.lat.toFixed(2)}},{{cityPoint.lng.toFixed(2)}})</i>
					<a href="javascript:;" @click="busSearchHandle">城市公交查询</a>
				</h1>
			</header>
			<DateTime @getGroupsList="getGroupsList" :keys="homeKeys"></DateTime>
			<!--Tags :keys="homeKeys"></Tags>
			<div class="refresh_list">
				<a href="javascript:;" @click="refreshListClickHandle">刷新列表</a>
			</div-->
			<Groups @setDataObject="setDataObject" :feeds="feedsData" :keys="homeKeys" len="1000" @getFeedsHandle="getFeedsHandle"></Groups>
		</article>
	</div>
</template>
<script>
	import Axios from 'axios';
	import qs from "Qs";
	export default {
		name: 'home',
		data: function(){
			return {
				feedsData:this.$store.state.home.feedsData,
				cityName:null,
				cityPoint:{
					lat:0,
					lng:0
				},
				homeKeys:[]
			}
		},
		watch:{
			feedsData:function(v){
				this.$store.commit("setHomeData", {
					feedsData: v
				})
			}
		},
		components:{
			Recommend: r => require.ensure([], () => r(require('../components/recommend.vue')), 'common_recommend'),
			//Tags: r => require.ensure([], () => r(require('../components/tags.vue')), 'common_tags'),
			DateTime: r => require.ensure([], () => r(require('../components/datetime.vue')), 'datetime'),
			Groups: r => require.ensure([], () => r(require('../components/groups.vue')), 'groups')
		},
		mounted:function(){
			const that = this;
			that.$emit("setDataObject", {type:'home', title:'首页'});
			that.getHomeNews();
		},
		methods:{
			citySearchNewsHandle(){
				this.$router.push('/search/'+this.$data.cityName)
			},
			getFeedsHandle(){
				this.getHomeNews();
			},
			setDataObject(v){
				this.$emit("setDataObject", v);
			}, 
			getHomeNews(){
				const that = this;
				let day = window.dateFormat(new Date().getTime());
				day = day.split('-');

				var map = new BMap.Map("allmap");
				var point = new BMap.Point(116.331398,39.897445);
				map.centerAndZoom(point,12);

				function myFun(result){
					console.log(result)
					var cityName = result.name;
					map.setCenter(cityName);
					that.$set(that, "cityName", cityName.replace(/省|市|区|县|镇|村/gim, ''))
					that.$set(that, "cityPoint", result.center)
					that.$nextTick(() => {
						that.getGroupsList(cityName.replace(/省|市|区|县|镇|村/gim, ''), day, "feedsData")
					})
				}
				var myCity = new BMap.LocalCity();
				myCity.get(myFun);
			},
			getGroupsList:function(v, day, name){
				const that = this;
				that.$nextTick(() => {
					that.getRecommendNews([], name)
				})
			},
			getRecommendNews: function(localData, name){
				const that = this;
				Axios.post(that.$store.state.api.getRecommendNews, qs.stringify({
					count: 6
				})).then((res) => {
					if (res.data.status === 1){
						that.$set(that, name, localData.concat(res.data.data))
					}else{
						that.$set(that, name, localData)
					}
				}).catch((err) => {
					that.$set(that, name, localData)
				});
			},
			busSearchHandle:function(){
				this.$router.push("/map")
			}
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	.home_main{
		margin:70/@base 0 0;
		padding:0 0 70/@base 0;
		.home_map{
			background-color: #fff;
			height:0/@base;
			overflow: hidden;
			.home_map_main{
				height:200/@base;
			}
		}
		article{
			&.home_main_item{
				header{
					h1{
						padding:10/@base 20/@base;
						font-size: 24/@base;
						font-weight: 400;
						background-color: #fff;
						margin:0 0 10/@base 0;
						text-align: center;
						i{
							font-style: normal;
							font-size: 16/@base;
							margin:0 0 0 10/@base;
							color:#ccc;
						}
						a{
							text-decoration: none;
							color:#003569;
							font-size: 20/@base;
							margin:0 0 0 10/@base;
							padding:5/@base 10/@base;
							border:1/@base solid #ccc;
							border-radius: 5/@base;
							display: inline-block;
						}
					}
				}
				.refresh_list{
					a{
						display:block;
						text-align: center;
						background-color: #e6e6e6;
						padding:10/@base;
						text-decoration: none;
						color:#999;
						font-size: 20/@base;
					}
				}
			}
		}
	}
</style>